<template>
	<view class="app app-bg">
		<view class="card" v-if="pageIndex === 0">
			<view>
				{{ $t("setting.please-enter") }} {{ $fn.hidden(form1.oldMobile, 3, 4) }}
				{{ $t("setting.sms-verification-code") }}
			</view>
			<u-form-item prop="oldMobileCode">
				<u-input
					v-model="form1.oldMobileCode"
					type="number"
					:focus="focus.oldMobileCode"
					:placeholder="$t('setting.please-enter-sms-verification-code')"
				/>
				<vk-data-verification-code
					custom-style="font-size:24rpx;color:#606266"
					ref="oldMobileCode"
					type="unbind"
					slot="right"
					seconds="60"
					:mobile="form1.oldMobile"
				/>
			</u-form-item>
			<view class="btn" @click="next(1)">{{ $t("setting.next-step") }}</view>
		</view>
		<view class="card" v-else-if="pageIndex === 1">
			<u-form-item prop="mobile">
				<u-input
					v-model="form1.mobile"
					type="number"
					:focus="focus.mobile"
					:placeholder="$t('setting.please-enter-a-new-mobile-number')"
				/>
			</u-form-item>
			<u-form-item prop="code">
				<u-input
					v-model="form1.code"
					type="number"
					:focus="focus.mobileCode"
					:placeholder="$t('setting.please-enter-sms-verification-code')"
				/>
				<vk-data-verification-code
					custom-style="font-size:24rpx;color:#606266"
					ref="mobileCode"
					seconds="60"
					slot="right"
					type="bind"
					:mobile="form1.mobile"
				/>
			</u-form-item>
			<view class="btn" @click="bindMobile">{{ $t("system.confirm") }}</view>
			<view class="btn btn2" v-if="from == 'log'" @click="notBind">暂不绑定</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageIndex: 0,
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: { oldMobile: "", oldMobileCode: "", mobile: "", code: "" },
			focus: { oldMobileCode: false, mobileCode: false, mobile: false },
			scrollTop: 0,
			from: ""
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop
	},
	onLoad(options = {}) {
		this.options = options
		this.from = options.from
		this.init(options)
	},
	methods: {
		// 页面数据初始化函数
		init(options = {}) {
			let that = this
			if (options.pageIndex) {
				that.pageIndex = Number(options.pageIndex) || 0
			}
			let a = this.$t("page.modify-mobile-number")
			let b = this.$t("page.bind-mobile-number")
			uni.setNavigationBarTitle({ title: that.pageIndex === 0 ? a : b })
			that.form1.oldMobile = vk.getVuex("$user.userInfo.mobile")
		},
		pageTo(path) {
			vk.navigateTo(path)
		},
		next(pageIndex) {
			let that = this
			if (!that.form1.oldMobileCode) {
				vk.toast(that.$t("setting.please-enter-the-verification-code"))
				that.focus.oldMobileCode = true
				return false
			}
			setTimeout(() => {
				that.pageIndex = pageIndex
				setTimeout(() => {
					that.$refs.mobileCode.reset(that.$t("setting.get-verification-code"))
				}, 100)
			}, 300)
		},
		// 绑定手机号
		bindMobile() {
			let that = this
			if (!vk.pubfn.test(that.form1.mobile, "mobile")) {
				vk.toast(that.$t("setting.please-enter-the-correct-mobile-number"))
				that.focus.mobile = true
				return false
			}
			if (!that.form1.code) {
				vk.toast(that.$t("setting.please-enter-the-verification-code"))
				that.focus.mobileCode = true
				return false
			}
			if (that.options.pageIndex === "1") {
				// 绑定
				vk.userCenter.bindMobile({
					data: that.form1,
					success: () => {
						vk.alert(that.$t("setting.binding-succeeded"), () => {
							if (this.from === "log") {
								vk.navigateToHome()
							} else {
								uni.navigateBack()
							}
						})
					}
				})
			} else {
				// 换绑
				vk.userCenter.bindNewMobile({
					data: that.form1,
					success: () => {
						vk.alert(that.$t("setting.bind-change-succeeded"), () => {
							if (this.from === "log") {
								vk.navigateToHome()
							} else {
								uni.navigateBack()
							}
						})
					}
				})
			}
		},
		notBind() {
			vk.navigateToHome()
		}
	}
}
</script>

<style lang="scss" scoped>
.card {
	padding: 6rpx 30rpx 30rpx;
	background-color: #ffffff;
}

.btn {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 70rpx;
	margin: 40rpx auto;
	background-color: var(--main);
	border-radius: 70rpx;
}
.btn2 {
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 70rpx;
	margin: 40rpx auto;
	background-color: #999999;
	border-radius: 70rpx;
}

.btn:active {
	filter: grayscale(50%);
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
